<template>
  <view class="box cadre-card-root" :style="fullStyle">

    <!-- 详情 begin -->
    <view class="content-item-1">
      <view class="title">{{ representativeInfo.liaisonName }}</view>
      <view class="info">
        <view class="avatar">
          <image :src="representativeInfo.representativePic" class="avatar"></image>
        </view>
        <view class="cadre-info">
          <view class="name">
            <view class="name-txt">
              {{ representativeInfo.representativeName }}
            </view>
            <view :key="roleIndex" v-for="(roleItem,roleIndex) in representativeInfo.roles"
                  class="name-tag tag-item">
              {{ roleItem }}
            </view>
          </view>
          <view class="post">
            {{ representativeInfo.representativeDuty }}
          </view>
          <view class="major">
            <view class="title2">专业领域：</view>
            <view class="tag-item" :key="representativeMajorIndex"
                  v-for="(representativeMajorItem,representativeMajorIndex) in representativeInfo.representativeMajors">
              {{ representativeMajorItem.majorName }}
            </view>
            <view class="vi" v-if="representativeInfo.representativeMajors.length==0">暂无</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 详情 end -->
    <!-- 服务 begin -->
    <view class="content-item-2" style="margin-top: 30px;">
      <image class="qrcode" :src="'https://api.qrserver.com/v1/create-qr-code/?data=http://pan.vc14.com/?representativeId='+representativeInfo.id" show-menu-by-longpress ></image>
    </view>
    <view class="content-item-2">
       扫一扫，向代表委员反映诉求
    </view>
   <view class="footer">
      <button @click="submitIdea" type="button" open-type="share" >转发名片</button>
    </view>
  </view>

</template>

<script>
import {baseMixins} from "@/mixins/baseMixins";

export default {
  mixins: [baseMixins],
  data() {
    return {
      representativeInfo: {}
    }
  },// 分享给朋友
  onShareAppMessage(res) {
  	return {
  		title:this.representativeInfo.liaisonName +" 驻站代表委员（"+this.representativeInfo.representativeName +"）向ta反映诉求",
  		path: '/pages/home/cadre?representativeId='+this.representativeInfo.id,
  		imageUrl: this.representativeInfo.representativePic,
  	}
  },
  // 分享到朋友圈
  onShareTimeline(res) {
  	return {
  		title:this.representativeInfo.liaisonName +" 驻站代表委员（"+this.representativeInfo.representativeName +"）向ta反映诉求",
  		path: '/pages/home/cadre?representativeId='+this.representativeInfo.id,
  		imageUrl: this.representativeInfo.representativePic,
  	}
  },
  onLoad(params) {
    this.representativeInfo = JSON.parse(decodeURIComponent(params.representativeInfo));
  },
  methods: {}
}
</script>

<style lang='scss' scoped>
    .major {
      padding: 10rpx 0;
    
      .title2 {
        margin-right: 20rpx;
      }
    
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .tag-item {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #FEDADA;
        color: #BD0E0E;
        border-radius: $border-radius-lg;
        font-size: 22rpx;
        padding: 10rpx 12rpx !important;
        margin-right: 10rpx;
        margin-bottom: 10rpx;
      
        &.empty {
          background: transparent;
          color: #ABABAB;
          border: 1rpx solid #ABABAB;
        }
      }
    }
.cadre-card-root {
  overflow: auto;
  box-sizing: border-box;
  color: #222222;
  background: linear-gradient(to bottom, #fff2f2, #fcc5c5);

  .content-item-1 {
    background: #FFF;
    padding: 20rpx;
    margin: 30rpx;
    border-radius: $border-radius-lg;

    .title {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 20rpx 0;
      font-weight: 600;
      font-size: 34rpx;
      color: #222222;
      line-height: 35rpx;
      font-style: normal;
      text-transform: none;
      margin-bottom: 20rpx;
    }

    .info {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .avatar {
        width: 160rpx;
        height: 176rpx;
        border-radius: 10rpx;

        image {
          border-radius: 10rpx;
        }
      }

      .cadre-info {
        display: flex;
        flex-direction: column;
        padding: 0 30rpx;
        height: auto;

        view {
          padding: 4rpx 0;
        }

        .name {
          display: flex;
          flex-direction: row;
          margin-bottom: 20rpx;

          .name-txt {
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 34rpx;
            color: #222222;
            line-height: 35rpx;
            font-style: normal;
            text-transform: none;
            margin-right: 10rpx;
          }
        }

        .post {
          font-size: 26rpx;
          color: #ABABAB;
        }

        .representative {
          font-size: 30rpx;
          color: #707070;
        }
      }
    }
  }

  .content-item-2 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30rpx 0;

    .qrcode {
      width: 480rpx;
      height: 480rpx;
    }
  }
}

    .footer {
      height: 120rpx;
      padding: 10rpx 50rpx;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #FFFFFF;
      z-index: 10;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    
      button {
        width: 100%;
        height: 80%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50rpx;
        color: #FFFFFF !important;
        background: linear-gradient(to bottom, #FA4D37, #C01600) !important;
      }
    }
</style>
